
<template>
  <div style="padding-top: 10px">
    <strong style="font-size: 20px;">实验名称</strong>
    <a-input v-model:value="experimentForm.experimentName" placeholder="请输入实验名称"></a-input> <!-- 添加输入框 -->
  </div>

  <div style="padding-top: 10px">
    <strong style="font-size: 20px;">数据样本</strong>
  </div>

  <table class="dataSampleTable">
    <tr style="font-size: 15px;border-bottom: 1px lightgrey solid">
      <td>样品信息</td>
      <td>
        .xlsx
      </td>
      <td>
        <a-button danger style="margin-bottom: 3px;margin-top: 5px">删除</a-button>
      </td>
      <td>
        <a-upload
        :before-upload="addSampleInformationFile">
          <a-button style="margin-bottom: 1px">
            选择本地文件
          </a-button>
        </a-upload>
      </td>
    </tr>

    <tr style="font-size: 15px;border-bottom: 1px lightgrey solid">
      <td>测试数据</td>
      <td>
        .xlsx
      </td>
      <td>
        <a-button danger style="margin-bottom: 3px;margin-top: 5px">删除</a-button>
      </td>
      <td>
        <a-upload
        :before-upload="addTestDataFile">
          <a-button style="margin-bottom: 1px">
            选择本地文件
          </a-button>
        </a-upload>
      </td>
    </tr>

    <tr style="font-size: 15px;border-bottom: 1px lightgrey solid">
      <td>样品图片</td>
      <td>
        .jpg/.png
      </td>
      <td>
        <a-button danger style="margin-bottom: 3px;margin-top: 5px">删除</a-button>
      </td>
      <td>
        <a-upload
            :directory="true"
            :before-upload="addSamplePictureFile">
          <a-button style="margin-bottom: 1px">
            选择本地文件
          </a-button>
        </a-upload>
      </td>
    </tr>

  </table>

<!--  <a-space direction="horizontal" style="margin-top: 8vh" size="large">-->
<!--    <a-upload-->
<!--    >-->
<!--      <a-button>新增样本</a-button>-->
<!--    </a-upload>-->
<!--    <a-button>确认</a-button>-->
<!--  </a-space>-->
  <a-button type="primary" style="margin-top: 8vh" @click="uploadFile">确认</a-button>

</template>

<script>
import axiosInstance from '@/axios/axios.js'
export default {
  name: "DataInfoEnterOfDataUpload",
  data(){
    return{
      experimentForm: {
        experimentName: '' // 用于保存实验名称的属性
        // ...其他可能的表单数据...
      }
    }
  },
  methods:{

    //点击确认后，上传文件
    //在下面的代码中从多个表里面选择不同属性，并将他们重构成一张大表，一次性的发送到后端
    uploadFile(){
      console.log("实验名称:", this.experimentForm.experimentName);
      const formData=new FormData();
      const experimentalConditionFormString=sessionStorage.getItem("experimentalConditionForm");
      const experimentalBatchFormString=sessionStorage.getItem("experimentalBatchForm");
      const experimentalConditionForm=JSON.parse(experimentalConditionFormString);
      const experimentalBatchForm=JSON.parse(experimentalBatchFormString);
      //实验数据集表
      formData.append("EXPERIMENT_SET_NAME",experimentalConditionForm.experimentSetName); //实验数据集名称@实验数据集表
      formData.append("APPLICATION_FIELD",experimentalConditionForm.applicationField); //应用领域 数据集描述 @实验数据集表 可删除
      formData.append("EXPERIMENT_DESCRIPTION",experimentalConditionForm.experimentDescription);  //数据集描述 @实验数据集表
      formData.append("UPLINK",experimentalConditionForm.uploader);  //上传人@实验数据集表
      formData.append("DATA_TYPE",experimentalConditionForm.dataType);   //数据类型 可删除
      //实验批次表单
      formData.append("TEST_LOT",experimentalBatchForm.experimentalBatch);  //批次名称 @批次表
      formData.append("PROCESS_NOTE",experimentalBatchForm.processNote);  //description 批次简短描述 @批次表

      formData.append("EXPERIMENT_NAME",this.experimentForm.experimentName);  //实验名称 @实验表


      // 将每个文件添加到 FormData 中
      this.$store.state.selectedFiles.forEach((fileObject, index) => {
        formData.append(fileObject.fileName, fileObject.fileContent);
      });

      // 遍历 FormData 中的键值对并打印
      console.log("表单内容：")
      formData.forEach((value, key) => {
        console.log(`${key}: ${value}`);
      });

      axiosInstance({	//无需再配置ip、port、工程名等
        method: "POST",
        url:'Upload_data',//这里需要加上后端的url，我忘了是什么了data_upload好像
        data:formData,
        headers: {
          'Content-Type': 'multipart/form-data', // Set the correct Content-Type
        },
      }).then(response => {
        console.log(response);
        this.$store.commit('clearSelectedFiles');  //上传完成后清除全局存储
      }).catch(error => {
        console.log(error);
      })
    },

    //向store中存储选中的文件
    //1.样品信息文件
    addSampleInformationFile(file,fileList){
      const uploadObject={
        fileName:"SAMPLE_INFORMATION",
        fileContent:file
      }
      this.$store.commit('addFile',uploadObject);
      console.log(this.$store.getters.getAllFiles)
      return false;
    },

    //2.测试数据文件
    addTestDataFile(file,fileList){
      const uploadObject={
        fileName:"TEST_DATA",
        fileContent:file
      }
      this.$store.commit('addFile',uploadObject);
      console.log(this.$store.getters.getAllFiles)
      return false;
    },

    //3.样品图片文件
    addSamplePictureFile(file,fileList){
      // 只在最后一次调用时处理所有文件
      if (fileList[fileList.length - 1] === file) {
        console.log('处理文件夹中的所有文件', fileList);
        fileList.forEach(fileItem => {
          if (this.isImage(fileItem)) { // 检查是否为图片文件
            const uploadObject = {
              fileName: "SAMPLE_PICTURE",
              fileContent: fileItem
            };
            this.$store.commit('addFile', uploadObject);
          }
        });


        console.log(this.$store.getters.getAllFiles)
      }
      return false;
    },
    isImage(file){
      return file.type.startsWith('image/');
    }
  }
}
</script>




<style scoped>

.dataSampleTable{
  width: 40vw;
  margin-left: 24vw;
  margin-top: 3vh;
}

</style>